<template>
	<view>		
		<scroll-view scroll-x class="bg-white nav">
			<view class="flex text-center">
				<view class="cu-item flex-sub" :class="index==current?'text-orange cur':''" v-for="(item,index) in tabs" :key="index"
				 @tap="onClickItem(index)">
					{{item}}
				</view>
			</view>
		</scroll-view>
		<view v-if="current == 0 ||current == 1" class="content bg-white padding-top solid-bottom" style="margin-top: 0px;">
			<view class="trade">
				<contract-martin ref="trade" :isLoginOn="isLoginOn" :type="type" v-if="strategy==0" v-on:changeStrategy="changeStrategy"></contract-martin>
				<contract-pagoda ref="trade" :type="type" v-else-if="strategy==1" v-on:changeStrategy="changeStrategy"></contract-pagoda>
				<contract-blood ref="trade" :type="type" v-else-if="strategy==2" v-on:changeStrategy="changeStrategy"></contract-blood>
				<contract-splint ref="trade" :type="type" v-else-if="strategy==3" v-on:changeStrategy="changeStrategy"></contract-splint>
				<!-- 防御尖刀 -->
				<contract-dagger ref="trade" :strategy="strategy" :type="type" v-else-if="strategy==4" v-on:changeStrategy="changeStrategy"></contract-dagger>
				<!-- 止损策略 -->
				<contract-dagger ref="trade" :strategy="strategy" :type="type" v-else-if="strategy==5" v-on:changeStrategy="changeStrategy"></contract-dagger>
				<!-- 限价委托 -->
				<contract-fixed ref="trade" :type="type" v-else-if="strategy==101" v-on:changeStrategy="changeStrategy"></contract-fixed>
				<!-- 止盈止损 -->
				<contract-stop ref="trade" :type="type" v-else-if="strategy==102" v-on:changeStrategy="changeStrategy"></contract-stop>
				<!-- 跟踪委托 -->
				<contract-track ref="trade" :type="type" v-else-if="strategy==103" v-on:changeStrategy="changeStrategy"></contract-track>
			</view>
			<view class="position">
				<positionList v-on:depthChange="depthChange"></positionList>
			</view>
		</view>
		<view v-if="current ==0 || current ==1 || current ==2" class="solid-top" :class="current==2?'':'margin-top-sm'">
			<entrustOkFixedOrderList :type="type" v-if="strategy==101"></entrustOkFixedOrderList>
			<entrustOkStopOrderList :type="type" v-else-if="strategy==102"></entrustOkStopOrderList>
			<entrustOkTrackOrderList :type="type" v-else-if="strategy==103"></entrustOkTrackOrderList>
			<entrustOrderList :type="type" :strategy="strategy" v-else></entrustOrderList>
		</view>
		<view v-else-if="current === 3">
			<positionUsed v-on:createTentOrder="createTentOrder"></positionUsed>
		</view>
		<uni-drawer :visible="drawerVisible" mask="false" mode="left" @close="closeDrawer">
			<marketDrawer :areaList="areaList" :marketList="marketList" @onSelect="mySelect"></marketDrawer>
		</uni-drawer>
	</view>
</template>

<script>
	import {
		mapState,
		mapActions
	} from 'vuex'
	import {
		uniDrawer
	} from '@dcloudio/uni-ui'

	import positionList from '../../components/positionList.vue'
	import entrustOrderList from '../../components/entrustOrderList.vue'
	import entrustOkFixedOrderList from '../../components/entrustOkFixedOrderList.vue'
	import entrustOkStopOrderList from '../../components/entrustOkStopOrderList.vue'
	import entrustOkTrackOrderList from '../../components/entrustOkTrackOrderList.vue'
	import contractMartin from '../../components/contractMartin.vue'
	import contractPagoda from '../../components/contractPagoda.vue'
	import contractBlood from '../../components/contractBlood.vue'
	import contractSplint from '../../components/contractSplint.vue'
	import contractTrack from '../../components/contractTrack.vue'
	import contractStop from '../../components/contractStop.vue'
	import contractDagger from '../../components/contractDagger.vue'
	import contractFixed from '../../components/contractFixed.vue'
	import marketDrawer from '../../components/marketDrawer.vue'
	import positionUsed from '../../components/positionUsedList.vue'
	var _self;

	export default {
		onLoad() {
			_self = this;
			_self.isLoginOn = _self.checkLogin()
			_self.initPage();
		},
		onHide() {
			// this.$refs.trade.onChangeType(1)
			console.log("on hide")
			if (_self.tickerTimer != null)
				clearInterval(_self.tickerTimer);

		},
		onShow() {
			_self.isLoginOn = _self.checkLogin()
			if (_self.isLoginOn)
				this.fresh()
		},
		onNavigationBarButtonTap(e) {
			if (e.index == 0) {
				this.drawerVisible = true;
			} else {
				// uni.navigateTo({
				// 	url: "/pages/trade/kline/main?symbol=" + this.symbol
				// })
			}
		},
		components: {
			marketDrawer,
			uniDrawer,
			positionList,
			entrustOrderList,
			entrustOkFixedOrderList,
			entrustOkStopOrderList,
			entrustOkTrackOrderList,
			contractMartin,
			contractPagoda,
			contractBlood,
			contractSplint,
			contractFixed,
			contractTrack,
			contractStop,
			contractDagger,
			positionUsed
		},
		data() {
			return {
				isLoginOn:false,
				current: 0,
				scrollLeft: 0,
				contracts: [],
				drawerVisible: false,
				tabs: ['开仓', '平仓', '委托', '持仓'],
				areaList: [{
					id: 1,
					name: "自选"
				}, {
					id: 2,
					name: "平台"
				}],
				marketList: [
					[],
					[],
					[],
					[]
				],				
				type: 1,
				filter: {
					independence: false,
					isTransNav: true,
					navHeight: 35,
					titleColor: '#F0EFEF',
					themeColor: '#090909',
				},
				strategy: 0
			}
		},
		methods: {
			onClickItem(index) {
				console.log(index)
				if (_self.current !== index) {
					_self.current = index;
				}
				_self.type = index + 1
				if(index>1){
					if(!_self.isLoginOn){
						uni.showModal({
							content:'该功能需要登录才可使用',
							success: (res) => {
								if(res.confirm){
									uni.navigateTo({
										url:'/pages/login/login'
									})
								}
							}							
						})
					}
				}
				
				this.scrollLeft = (index - 1) * 60
				this.fresh()

			},
			changeStrategy(event) {
				_self.strategy = event.index	
				// for (var i = 0; i < this.ContractStrategy.length; i++) {
				// 	if (event == this.ContractStrategy[i].id) {
				// 		console.log('is open status'+this.ContractStrategy[i].isOpen)
				// 		if(this.ContractStrategy[i].isOpen){
				// 			console.log("change strategy :" + event.index)
				// 			_self.strategy = event.index							
				// 		}else{
				// 			console.log('ioOpen false do nothing')
				// 		}						
				// 	} 
				// }			
			
			},
			fresh() {
				console.log("fresh type :" + _self.type)
				switch (_self.type) {
					case 1:
						uni.$emit('positionFresh')
						uni.$emit('contractFresh')
						break
					case 2:
						uni.$emit('positionFresh')
						uni.$emit('contractFresh')
						uni.$emit('freshStrategy')
						break
					case 3:
						uni.$emit('orderFresh')
						break
					case 4:
						uni.$emit('positionUsedFresh')
						break

				}
			},
			mySelect(e) {
				_self.instrument = e;
				console.log("selelct e " + e)
				if (e != null) {
					uni.setNavigationBarTitle({
						title: e.instrument_id
					})
					_self.cacheDefaultContract(e)
				}
				console.log("=====================emit resh=====================")
				uni.$emit('positionFresh')
				uni.$emit('contractFresh')
				_self.closeDrawer();
			},

			//========================componet action end============================//
			closeDrawer() {
				_self.drawerVisible = false;
			},
			depthChange(e) {
				console.log("===============" + e + "==================")
			},

			initPage: async function() {
				_self.marketList = _self.getMarkets()
				uni.setNavigationBarTitle({
					title: _self.getDefaultContract().instrument_id
				})
			}

		}
	}
</script>

<style scoped>
	.content {
		margin-top: 20upx;
		display: flex;
	}

	.segmented {
		border-bottom: #F0EEEE 1px solid;
		height: 70upx;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
	}

	.segmented view {
		width: 20%;
		display: inline-flex;
		justify-content: center;
		align-items: center;
	}

	.leverage-tag-g {
		border: #B8B8B8 1px solid;
		border-radius: 40px;
		line-height: 18upx;
		height: 40upx;
		width: 40upx;
		font-size: 18upx;
		justify-content: center;
		align-items: center;
		display: inline-flex;
		background-color: #00B48E;
		color: #F3F3F3;
	}

	.leverage-tag-r {
		border: #B8B8B8 1px solid;
		border-radius: 40px;
		line-height: 18upx;
		height: 40upx;
		width: 40upx;
		font-size: 18upx;
		justify-content: center;
		align-items: center;
		display: inline-flex;
		background-color: #D14B64;
		color: #F3F3F3;
	}

	.leverage-box {
		align-items: center;
		display: inline-flex;
	}

	.content .trade {
		width: 60%;
		padding-left: 20upx;
		padding-right: 20upx;
	}

	.content .position {
		width: 40%;
	}
</style>
